---
title: Installation d'un module d'extension Vite ou Rollup
description: Découvrez comment vous pouvez importer des données YAML en ajoutant un module d'extension Rollup à votre projet.
i18nReady: true
type: recipe
---
import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Astro s'appuie sur Vite et prend en charge les modules d'extension Vite et Rollup. Cette recette utilise un module d'extension Rollup pour ajouter la possibilité d'importer un fichier YAML (`.yml`) dans Astro.

## Recette

<Steps>
1. Installez `@rollup/plugin-yaml`:

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add @rollup/plugin-yaml --dev
        ```
        </Fragment>
    </PackageManagerTabs>

2. Importez le module d'extension dans votre fichier `astro.config.mjs` et ajoutez-le au tableau des modules d'extension de Vite :

    ```js title="astro.config.mjs" ins={2,5-7}
    import { defineConfig } from 'astro/config';
    import yaml from '@rollup/plugin-yaml';

    export default defineConfig({
      vite: {
        plugins: [yaml()]
      }
    });
    ```
  
3. Enfin, vous pouvez importer des données YAML en utilisant une instruction `import` :

    ```js
    import yml from './data.yml';
    ```

    :::note
    Bien que vous puissiez maintenant importer des données YAML dans votre projet Astro, votre éditeur ne fournira pas de types pour les données importées. Pour ajouter des types, créez ou trouvez un fichier `*.d.ts` existant dans le répertoire `src` de votre projet et ajoutez ce qui suit :
    ```ts title="src/files.d.ts"
    // Spécifiez l'extension du fichier que vous voulez importer
    declare module "*.yml" {
      const value: any; // Ajoutez des définitions de type ici si vous le souhaitez
      export default value;
    }
    ```
    Cela permettra à votre éditeur de fournir des indications de type pour vos données YAML.
    :::
</Steps>
